<template>
	<section id="home-focus" class="focus-container clearfix" v-if='contentList.length'>
		<div class="mask_lt"></div>
		<div class="mask_rt"></div>
		<div class="swiper-container swiper-container-horizontal swiper-container-free-mode swiper-no-swiping">
			<div class="swiper-wrapper" style="transform: translate3d(0px, 0px, 0px);">
				<div class="swiper-slide swiper-slide-active" v-for="(item, index) in contentList" :key="index">
					<a :href="Path + item.url" target="_blank" :title="item.title">
						<img :src="getImgPath((item?.extend.singleImgUpload6v6C?item.extend.singleImgUpload6v6C:'') || item.headImag  || '')" class="img_banner" :alt="item.title" />
					</a>
					
				</div>
			</div>
			<div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets"></div>
			<p class='p_descripte item_title'>{{activeTitle}}</p>
		</div>
		<div class='direction-contanier'>
			<div class="direction">
				<div class="swiperButton swiperButton_left"><span class="iconfont icon-a-Leftarrow"></span></div>
				<div class="swiperButton swiperButton_right"><span class="iconfont icon-a-Rightarrow"></span></div>
			</div>
		</div>
	
	</section>
</template>

<script>
export default {
	data() {
		return {
			contentList: [],
			Path: getRootPath(),
			activeTitle:'',
		};
	},
	mounted() {
		this.getContentOfChannel();
	},
	methods: {
		getContentOfChannel() {
			let query = GetQueryString();
			let param = {
				channelIdStr: query.id,
				orderBy: 1,
				typeIdStr: '1002',
				
			};
			contentApi.fetchContentOfChannel(param, res => {
				if (res.code == '00000 00000') {
					this.contentList = res.data.records;
					this.activeTitle = this.contentList[0].title
					
					this.$nextTick(() => {
						let _this = this;
						var swiper = new Swiper('.swiper-container', {
							pagination: {
							        el: ".swiper-pagination",
							        clickable: true,
							      },
							paginationClickable: true,
							spaceBetween: 0,
							paginationClickable: true,
							navigation: {
							    nextEl: ".swiperButton_right",
							    prevEl: ".swiperButton_left",
							},
							parallax: true,
							speed: 1000,
							loop: true,
							autoplay: {
							        delay: 5000,
							      },
							on: {
								transitionStart: function() {
									let e = this;
									if (e.activeIndex > _this.contentList?.length) {
										_this.activeTitle =_this.contentList[0].title;
									} else if (e.activeIndex == 0) {
										_this.activeTitle =_this.contentList[_this.contentList?.length - 1]?.title;
									} else {
										_this.activeTitle =_this.contentList[e.activeIndex - 1]?.title;
									}
								},
							}

						});
						$('.swiper-container').mouseover(function() {
							swiper.autoplay.stop();
							// 停止自动滚动
						});
						$('.swiper-container').mouseout(function() {
							swiper.autoplay.start();
						});
					});
				} else {
				}
			});
		},
		getImgPath(url){
			return imgPath(url);
		},

	}
};
</script>

<style scoped>
#home-focus {
	position: relative;
	width: 100%;
}
#home-focus .swiper-container {
	width: 1100px;
	height: fit-content;
	margin: 40px auto;
	margin-bottom: 0px;
	position: relative;
	overflow: visible;
}
#home-focus .swiper-wrapper{
	height:fit-content;
}
#home-focus .swiper-wrapper a{
	display: block;
	width: 1100px;
	height: fit-content;
}

#home-focus .item_title{
	width: 1100px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 30px;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #FFFFFF;
	line-height: 30px;
	position: absolute;
	bottom: 0px;
	left: 0px;
	padding: 30px 40px;
	z-index: 1;
	background: linear-gradient(360deg, #111111 0%, rgba(17,17,17,0) 100%);
	box-sizing: border-box;
}
#home-focus .mask_rt,
#home-focus .mask_lt {
	position: absolute;
	z-index: 2;
	left: 0px;
	filter: alpha(Opacity=70);
	opacity: 0.7;
	background: #000;
	overflow: hidden;
	height: 100%;
	width: calc(50% - 550px);
}

#home-focus .mask_rt {
	right: 0px;
	left:auto;
}



.swiper-slide {
	width: 1100px !important;
	height: fit-content;
}
.swiper-slide .img_banner{
	width: 1100px;
	height: auto;
}

.swiper-wrapper{
	margin: auto;
	width: 1100px;
	overflow:visible;
}
.direction-contanier{
	position: absolute;
	width: 50px;
	bottom: 35px;
	z-index: 2;
	height: 1px;
	display: flex;
	top: 50%;
	width: 100%;
	justify-content: center;
}
.direction {
	display: flex;
	width: 1260px;
	justify-content: space-between;
}

.direction .swiperButton {
	width: 80px;
	height: 80px;
	line-height: 80px;
	text-align: center;
}

.direction .swiperButton .iconfont {
	color: #fff;
	font-size: 72px;
	font-weight: 400;
	opacity: 1;
}
</style>
<style>
	#home-focus .swiper-pagination{
		display: flex;
		justify-content: flex-end;
		padding-right:40px;
		box-sizing: border-box;
		margin-bottom: 40px;
	}
	#home-focus .swiper-pagination .swiper-pagination-bullet {
		background-color: #fff;
		opacity: 0.5;
		margin-right: 8px;
		width: 10px;
		height: 10px;
	}
	
	#home-focus .swiper-pagination .swiper-pagination-bullet-active {
		opacity: 1;
	}
</style>
